<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: rgb(255,251,240);
			}
			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}
			.mui-content{
				margin: 1% 1%;
			}
			.mui-row .mui-fullscreen #tab_cate #segmentedControlContents{
				height: 100%;
			}
			.mui-col-xs-4
			.mui-control-content{
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control
			.mui-control-item{
				width: 100%;
				/*line-height: 60px;*/
			}
			img{
				width: 100%;
				height: 40px;
			}
			.catemom{
				background: whitesmoke;
				border-radius: 5%;
				margin: 3% 0;
				padding: 2% 2%;
				border:1px lightgrey solid;
			}
			.catemom img{
				width: 80%;
				display: block;
				margin: 5px auto;
				border-radius: 5%;
			}
			.cateson{
				height: 30%;
				margin: 0 2%;
				background: white;
				border-radius: 5%;
				border: 1px lightgrey solid;
				
			}
		</style>
	</head>

	<body>
		<div class="mui-content mui-row mui-fullscreen">
				<div class="mui-col-xs-4" id="tab_cate" style=" border: 1px rgb(222,222,230) solid; border-radius:50% / 10%; height: 100%;">
					<div class="mui-scroll-wrapper" style="width: 100%; height: 80%;margin: 10% 0;">
						<div id="segmentedControls" class="mui-scroll" style=" padding: 2% 10%; width: 100%;">
							
						</div>
					</div>
				</div>
				<div class=" mui-col-xs-8" style="border: 1px rgb(222,222,222) solid;border-radius: 30% / 10%;height: 100%;">
					<div class="mui-scroll-wrapper" style="width: 100%; height: 80%;margin: 10% 0;">
						<div id="segmentedControlContents" class="mui-scroll" style="padding: 2% 2%; width: 100%;">
				
						</div>
					</div>
				</div>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/config.js"></script>
		<script>
			mui.init({
				swipeBack: false
			}); 
			
			/** 
			 * @return {定义请求接口与插入数据节点}
			 * @param {childHtml} 追加子元素中间变量
			 */
			var childHtml = '';
			mui.plusReady(function(){
				/**
				 * @return {检测本地是否缓存}
				 * @param {cate_data} cate 页数据 本地缓存
				 * @param {quest} 请求类型
				 */
				var quest = 'pcate';
				
				
				var cate_data = plus.storage.getItem('cate_data["'+quest+'"]');
				//如果有 判断是否过期
				var type = 'inner';
				if(cate_data){
					//如果有数据  判断是否需要更新
					
					//load();
				}else{
					
					getData(type,quest);
					
				}
				/**
				 * @return {添加点击事件}
				 */
				
				
				
			});
			
			//ajax 请求
			var getData = function(type,quest){
				var type = type;
				var quest = quest;
				var data = quest == 'pcate'? '':quest;
				var ip = ipconfig().ip;
				var api = quest == 'pcate'? 'getFirstCate':'getSecondCate';
				mui.ajax(ip+'CatePage.'+api,{
					data:{cid:data},
					dataType:'json',
					timeout:10000,
					type:'get',
					headers:{'Content-Type':'application/json'},
					success:function(data){
						load(data.data.data,type,quest);
						
						if(quest=='pcate'){
							var alink = mui('.mui-control-item');
							
							mui.each(alink,function(index,item){
								quest = item.getAttribute('href').slice(8);
								getData('append',quest);
							});
							
						}
						//console.log(document.getElementById('segmentedControlContents').innerHTML);
					},
					error:function(xhr,type,errorThrow){
						console.log(type);
					}
				})
				
			}
			
			//动态载入dom函数
			var load = function(cateData,type,quest){
				var jpg = ipconfig().jpg;
				
				/**
				 * @return 第一级分类节点 
				 * @return 第二级分类节点
				 */
				var pcate = document.getElementById('segmentedControls');
				var scate = document.getElementById('segmentedControlContents');
				
				var domhtml = [];
				var dom = quest=='pcate'?pcate : scate;
				
				//定义模板
				var domHeadr = quest=='pcate'? '':'<div id="content'+quest+'" class="mui-control-content" style="width:100%; border:solid lightgray 1px;"><ul class="mui-row" style="height:380px;min-height:380px; width:100%; padding:1% 1%;">';
				
				var domFooter =  quest=='pcate'?'' : '</ul></div>';
				
				domhtml.push(domHeadr);
				mui.each(cateData,function(index,item){
					var domContent = quest=='pcate'?'<a href="#content'+item.id+'" class="mui-control-item catemom" style="padding:15px 0; display:block;width:100%;"><img  src="'+jpg+item.thumb+'"/><p style="padding:5px 0; line-height:0px;text-align:center;">'+item.name+'</p></a>':'<li id="cateContent" class="mui-table-view-cell mui-media mui-col-xs-4 cateson">'+quest+'<a href="#" style="display:block;"><div class="mui-media-body"><img src="'+jpg+item.thumb+'"/><p>'+item.name+'</p></div></a></li>';
					domhtml.push(domContent);
				});
				domhtml.push(domFooter);
				
				if(type == 'inner'){
					dom.innerHTML = domhtml.join("");
					mui('.mui-scroll-wrapper').scroll({
						deceleration:5000
					});
				}else{
					childHtml = childHtml+domhtml.join("");
					//console.log(childHtml);
					dom.innerHTML = childHtml;
					mui('.mui-scroll-wrapper').scroll({
						deceleration:5000
					});
				} 
				
				
				if(pcate.querySelector('.mui-control-item')&&scate.querySelector('.mui-control-content')){
					pcate.querySelector('.mui-control-item').classList.add('mui-active');
					scate.querySelector('.mui-control-content').classList.add('mui-active');
				}
				
				
			}
			
			
			
			
			
			
			//初始化scroll插件
			
			
			
		</script>
	</body>
</html>